<template lang="pug">
    #chart(style="width:100%;height:100%")
</template>

<script>
/* eslint-disable */
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/toolbox';
import _ from 'lodash';

export default {
    props: {
        name: {
            type: String,
            required: true
        },
        line: {
            type: Array,
            default: function() {
                return [];
            }
        },
        trend: {
            type: Object,
            default: function() {
                return {
                    index: [],
                    data: []
                };
            }
        }
    },
    data() {
        return {
            chart: null,
            yUnit: {
                speed: '转速/rpm',
                i30: '电流/A',
                i50: '电流/A',
                u30: '电压/V',
                u45: '电压/V',
                u50: '电压/V'
            }
        };
    },
    computed: {
        starterId() {
            return this.$store.state.starterId;
        },
        testId() {
            return this.$store.state.testId;
        },
        channelColor() {
            return this.$store.state.channelColor;
        },
        // 四分位+边界平滑
        quarterSeries() {
            return [
                {
                    // min
                    name: 'trend',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        return [d, this.trend['data'][i][0].toFixed(2)];
                    }),
                    lineStyle: {
                        normal: {
                            opacity: 0
                        }
                    },
                    stack: 'bound',
                    smooth: true,
                    symbolSize: 0,
                    xAxisIndex: 0
                },
                {
                    // 25%
                    name: 'trend',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        return [d, this.trend['data'][i][1].toFixed(2)];
                    }),
                    lineStyle: {
                        normal: {
                            opacity: 0
                        }
                    },
                    stack: 'main',
                    smooth: true,
                    symbolSize: 0,
                    xAxisIndex: 0
                },
                {
                    // 50%
                    name: '50%',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        return [d, this.trend['data'][i][2].toFixed(2)];
                    }),
                    lineStyle: {
                        type: 'solid'
                    },
                    xAxisIndex: 0
                },
                {
                    // 75%
                    name: 'trend',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        return [
                            d,
                            (
                                this.trend['data'][i][3] -
                                this.trend['data'][i][1]
                            ).toFixed(2)
                        ];
                    }),
                    lineStyle: {
                        normal: {
                            opacity: 0
                        }
                    },
                    areaStyle: {
                        opacity: 0.5
                    },
                    stack: 'main',
                    smooth: true,
                    symbolSize: 0,
                    xAxisIndex: 0
                },
                {
                    // max
                    name: 'trend',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        return [
                            d,
                            (
                                this.trend['data'][i][4] -
                                this.trend['data'][i][0]
                            ).toFixed(2)
                        ];
                    }),
                    lineStyle: {
                        normal: {
                            opacity: 0
                        }
                    },
                    areaStyle: {
                        opacity: 0.3
                    },
                    stack: 'bound',
                    smooth: true,
                    symbolSize: 0
                },
                {
                    // mean
                    name: 'mean',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        return [d, this.trend['data'][i][5].toFixed(2)];
                    }),
                    xAxisIndex: 0,
                    lineStyle: {
                        type: 'dashed',
                        color: 'black'
                    }
                }
            ];
        },
        // 最值法
        maximum() {
            return [
                {
                    name: 'min',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        return [d, this.trend['data'][i][0]];
                    }),
                    stack: 'trend',
                    smooth: true,
                    symbolSize: 0
                },
                {
                    name: 'max',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        return [
                            d,
                            this.trend['data'][i][1] - this.trend['data'][i][0]
                        ];
                    }),
                    stack: 'trend',
                    areaStyle: {
                        normal: {
                            color: '#00ff40'
                        }
                    },
                    smooth: true,
                    symbolSize: 0
                },
                {
                    name: 'mean',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        return [d, this.trend['data'][i][2]];
                    }),
                    smooth: true,
                    lineStyle: {
                        normal: {}
                    }
                }
            ];
        },
        // 偏离程度计算方法
        // 箱线图的四分位内限法
        lowLimit() {
            return [
                {
                    name: 'AMI',
                    type: 'line',
                    data: this.trend['index'].map((d, i) => {
                        // return [d, this.trend['data'][i][6].toFixed(2)];
                        return [d,0]
                    }),
                    lineStyle: {
                        color: 'rgba(255, 0, 0, 0.7)'
                    },
                    areaStyle: {
                        color: 'rgba(255, 0, 0, 0.7)'
                    },
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    smooth: true
                }
            ];
        }
    },
    watch: {
        line: function(newVal, oldVal) {
            this.chart.setOption(this.getOp());
        },
        trend: function(newVal, oldVal) {
            this.chart.setOption(this.getOp());
        }
    },
    methods: {
        getOp() {
            return {
                // title: {
                //     text: this.name,
                //     left: 'center',
                //     top: '2%',
                //     textStyle: {
                //         fontFamily: 'Microsoft YaHei',
                //         fontSize: 14,
                //         color: this.channelColor[this.name]
                //     }
                // },
                backgroundColor: '#fff',
                color: [
                    '#ff80ff',
                    this.channelColor[this.name],
                    this.channelColor[this.name],
                    'black',
                    'rgba(255, 0, 0, 0.7)'
                ],
                legend: {
                    // orient: 'vertical',
                    // right: '2%',
                    top: '5%',
                    data: [
                        {
                            name: 'line',
                            icon: 'roundRect'
                        },
                        {
                            name: 'trend',
                            icon: 'roundRect'
                        },
                        {
                            name: 'AMI',
                            icon: 'roundRect'
                        },
                        {
                            name: '50%',
                            icon: 'roundRect'
                        },
                        {
                            name: 'mean',
                            icon: 'roundRect'
                        }
                    ]
                },
                tooltip: {
                    trigger: 'axis',
                    textStyle: {
                        align: 'left'
                    },
                    axisPointer: {
                        type: 'cross'
                    },
                    formatter: params => {
                        let res = '时间 : ' + params[0].data[0] + 'ms';
                        params.forEach(v => {
                            res +=
                                '<br>' +
                                v.marker +
                                v.seriesName +
                                ' : ' +
                                v.data[1];
                        });
                        return res;
                    }
                },
                toolbox: {
                    feature: {
                        restore: {},
                        seriesIndex: {
                            line: [0]
                        }
                    }
                },
                dataZoom: {
                    type: 'inside',
                    orient: 'horizontal',
                    filterMode: 'empty',
                    xAxisIndex: [0]
                },
                grid: {
                    left: '5%',
                    right: '9%',
                    bottom: '3%',
                    containLabel: true,
                    show: true,
                    borderColor: this.channelColor[this.name]
                },
                xAxis: [
                    {
                        name: '时间/ms',
                        nameGap: 30,
                        type: 'category',
                        data: _.range(0, 2001),
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: this.channelColor[this.name]
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        name: this.yUnit[this.name],
                        type: 'value',
                        min:
                            this.line.length | this.trend['index'].length
                                ? null
                                : 0,
                        max:
                            this.line.length | this.trend['index'].length
                                ? null
                                : 20,
                        axisLabel: {
                            formatter: function(v) {
                                return Number(v).toFixed(2);
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: this.channelColor[this.name]
                            }
                        },
                        splitArea: {
                            show: true
                        }
                    },
                    {
                        name: '异常系数',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: this.channelColor[this.name]
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: 'line',
                        type: 'line',
                        data: this.line.map(v => {
                            return [v.row_id, Number(v.channel)];
                        }),
                        smooth: true,
                        showSymbol: false,
                        z: 9,
                        lineStyle: {
                            type: 'solid',
                            color: '#ff80ff'
                        },
                        xAxisIndex: 0,
                        yAxisIndex: 0
                    }
                ].concat(this.quarterSeries, this.lowLimit)
            };
        }
    },
    mounted() {
        this.chart = echarts.init(this.$el);
        this.chart.setOption(this.getOp());
    }
};
</script>

<style lang="less">
.trend-chart {
    width: 300px;
    height: 220px;
}
</style>
